<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../myCss/reset.css"/>
    <link rel="stylesheet" href="../../myCss/pullToRefresh.css"/>
    <style>
        .scroller li{
            border-bottom: 1px solid #dddddd ;
        }
        .aui-card-list{
            margin-bottom: 0;
        }
        .sort{
            display: none;
            width: 90px;
            height: 103px;
            position: fixed;
            z-index: 99;
            background: #fff;
            left: 0;
            font-size: 14px;
            text-align: center;
            border-bottom:1px solid #ededed;
        }
        .sort div{
            padding: 6px 0;
            border-top:1px solid #ededed;
        }
         .serBar{
        height:45px;
        background:#27AA9E;
        width:100%;
        top: 0;
   		position: fixed;
    	z-index: 100;
    	display:none;
        }
        .seript{
        height:30px;
        padding:0 0 0 10px;
        width:80%;
        margin:8px 3px 0 8px;
        font-size:13px;
        border-radius: 5px;
        }
          .act{
            color: #38c89f;
        }
        .name{
        width:130px;
        font-size:13px !important;
         overflow:hidden; /*超出宽度部分的隐藏*/
        white-space:nowrap; /*文字不换行*/
        text-overflow:ellipsis;}
    </style>
</head>
<body style="overflow: hidden">
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" tapmode onclick="location.href='../helpBuy/index.html'">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">我的代购</div>
     <div class="aui-btn aui-pull-right" id="serh"><span class="fa fa-search"></span></div>
</header>
 <div class="serBar" id="serBar">
    <div><input class="seript" placeholder="输入购买商品名" id="search-input">
    <span class="fa fa-search" style="color:#fff;" id="ser" ></span>
    <span class="fa fa-window-close-o" style="margin-left:7px;color:#fff" id="close"></span>
    </div>
    </div>
<!-- <div class="aui-searchbar" id="search"style="margin-top: 45px;">
    <div class="aui-searchbar-input aui-border-radius" tapmode >
        <i class="aui-iconfont aui-icon-search"></i>
        <form action="javascript:search();">
            <input type="search" placeholder="输入购买商品或用户名" id="search-input">
        </form>
    </div>
    <div class="ser" id="ser">搜索</div>
</div> -->
<section class="aui-content"style="margin: 46px 0 5px 0" >
    <div class="aui-card-list" style="padding-left: 7px">
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;width:90px;text-align: center" >
            <span id="sortBtn">全部订单</span>
            <span>▽</span>
        </div>
        <div class="sort">
            <div  class="act" onclick="sortC(this)" temp="2">全部订单</div>
            <div  onclick="sortC(this)" temp="0">进行中</div>
            <div onclick="sortC(this)" temp="1">已完成</div>
        </div>
    </div>
</section>
<div id="wrapper" >
    <ul class="aui-list aui-media-list" id="buyUl">
    </ul>
</div>



<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script type="text/javascript" src="../../AUI/script/aui-tab.js" ></script>
<script src="../../myJs/iscroll.js"></script>
<script src="../../myJs/pullToRefresh.js"></script>
<script type="text/javascript" src="../../AUI/script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script>
     /* var data = {
        "code": 200,
        "user": {
            "userID": "1"
        },
         "msg": [
        {
            "purchaseId": "2",
            "headPortraitUrl": "../../myImage/4.jpg",
            "nickname": "summy",
            "purchaseState": "进行中",
            "acceptTime": "2017-2-5 11：12",
            "creditScore": "90",
            "orderId": "2",
            "userId":"2"
        },
        {
            "purchaseId": "3",
            "headPortraitUrl": "../../myImage/6.jpg",
            "nickname": "小白兔",
            "purchaseState": "已完成",
            "acceptTime": "2017-2-5 11：12",
            "creditScore": "90",
            "orderId": "3",
            "userId":"3"
        },
        {
            "purchaseId": "4",
            "headPortraitUrl": "../../myImage/5.png",
            "nickname": "大大",
            "purchaseState": "进行中",
            "acceptTime": "2017-2-5 11：12",
            "creditScore": "90",
            "orderId": "4",
            "userId": "4"
        }
    ]

    } */
    $(function(){
        $.ajax({
         type: "post",
         url: '/randomdelivery/userManageController/userPurchaseOrder',
         data: {
         "userId": 70381
         },
         datatype: "json",
         success: function (data) {
         alert(JSON.stringify(data));
            viewBuy(data);
         }

         });
       // viewBuy(data);
    })
    function viewBuy(data){
        var data = data.msg;
        var orderState;
         $("#buyUl").html("");
        $.each(data,function(num,data){
        var purchaseState = data.purchaseState;
         if(data.orderState==0){
         orderState="已接单";
         }  else if(data.orderState==1){
         orderState="待支付";
         }
         else if(data.orderState==2){
         orderState="已支付";
         }
         else if(data.orderState==3){
         orderState="寄件中";
         }
         else if(data.orderState==4){
         orderState="待取件";
         } else if(data.orderState==5){
         orderState="派件中";
         }
         else if(data.orderState==6){
         orderState="已完成";
         } else if(data.orderState==7){
         orderState="已关闭";
         }
         else if(data.orderState==8){
         orderState="退款中";
         }if(data.orderState==8){
            $("#buyUl").append('<li >\
                   <div class="aui-media-list-item-inner">\
                    <div class="aui-list-item-media" style="width: 2.2rem;">\
                    <img src="'+data.headPortraitUrl+'" class="aui-img-round" onclick="info(this)" userId="'+data.userId+'">\
                    </div>\
                    <div class="aui-list-item-inner" orderId="'+data.orderId+'" onclick="orderInfo(this)">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-12" style="color:#777">'+data.nickname+' </div>\
            <div class="aui-list-item-right"style="color:rgba(232, 201, 48,1)"><span class="fa fa-money"></span>'+orderState+'</div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title" style="font-size:13px;"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i>&nbsp;&nbsp;'+data.tradeName+'</div>\
                    <div class="aui-list-item-right">'+data.acceptTime+'</div>\
            </div>\
            </div>\
            </div>\
            </li>');
            }else if(data.orderState==6){
            $("#buyUl").append('<li >\
                   <div class="aui-media-list-item-inner">\
                    <div class="aui-list-item-media" style="width: 2.2rem;">\
                    <img src="'+data.headPortraitUrl+'" class="aui-img-round" onclick="info(this)" userId="'+data.userId+'">\
                    </div>\
                    <div class="aui-list-item-inner" orderId="'+data.orderId+'" onclick="orderInfo(this)">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-12" style="color:#777">'+data.nickname+' </div>\
            <div class="aui-list-item-right"><span class="fa fa-gift"></span>'+orderState+'</div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title" style="font-size:13px;"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i>&nbsp;&nbsp;'+data.tradeName+'</div>\
                    <div class="aui-list-item-right">'+data.acceptTime+'</div>\
            </div>\
            </div>\
            </div>\
            </li>');
            }else if(data.orderState==7){
            $("#buyUl").append('<li >\
                   <div class="aui-media-list-item-inner">\
                    <div class="aui-list-item-media" style="width: 2.2rem;">\
                    <img src="'+data.headPortraitUrl+'" class="aui-img-round" onclick="info(this)" userId="'+data.userId+'">\
                    </div>\
                    <div class="aui-list-item-inner" orderId="'+data.orderId+'" onclick="orderInfo(this)">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-12" style="color:#777">'+data.nickname+' </div>\
            <div class="aui-list-item-right" style="color:rgba(255, 39, 18, 0.82)"><span class="fa fa-times-circle-o"></span>'+orderState+'</div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title" style="font-size:13px;"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i>&nbsp;&nbsp;'+data.tradeName+'</div>\
                    <div class="aui-list-item-right">'+data.acceptTime+'</div>\
            </div>\
            </div>\
            </div>\
            </li>');
            }else{
            $("#buyUl").append('<li >\
                   <div class="aui-media-list-item-inner">\
                    <div class="aui-list-item-media" style="width: 2.2rem;">\
                    <img src="'+data.headPortraitUrl+'" class="aui-img-round" onclick="info(this)" userId="'+data.userId+'">\
                    </div>\
                    <div class="aui-list-item-inner" orderId="'+data.orderId+'" onclick="orderInfo(this)">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-12" style="color:#777">'+data.nickname+' </div>\
            <div class="aui-list-item-right" style="color:#27AA9E"><span class="fa fa-street-view"></span>'+orderState+'</div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title name" style="font-size:13px;"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i>&nbsp;&nbsp;'+data.tradeName+'</div>\
                    <div class="aui-list-item-right">'+data.acceptTime+'</div>\
            </div>\
            </div>\
            </div>\
            </li>');
            }
        })
    }

    function info(node){
        var userId = node.getAttribute("userId");
        //alert(userId);
        location.href='../find/friendInfo.html';
    }

    function orderInfo(node){
        var orderId = node.getAttribute("orderId");
         sessionStorage.setItem("orderId", orderId);
        alert(orderId);
        location.href='../helpBuy/receivedOrder.html';
    }
   $("#sortBtn").on("click",function(){
       $(".sort").fadeIn("slow");
   })
   function sortC(node){

	    var temp=node.getAttribute("temp");
	    $.ajax({
	           type: "post",
	           url: '/randomdelivery/userManageController/userChoosePurchaseOrder',
	           data: {temp:temp},
	           datatype: "json",
	           success: function (data) {
	           alert(JSON.stringify(data));
	            $(".sort div").removeClass("act");
	          var method = node.innerHTML;
	          node.className='act';
	          $(".sort").fadeOut("slow");
	          $("#sortBtn").html(method);
	          viewBuy(data);
	           }

	           });
   }
   
       /* 搜索 */
    $("#ser").on("click",function(){
    	var str = $("#search-input").val();
        $.ajax({
            type: "post",
            url: '/randomdelivery/userManageController/userPurchaseOrderSelectBy',
            data: {
            	temp:str
            },
            datatype: "json",
            success: function (data) {
                alert(JSON.stringify(data));
                viewBuy(data);
               $("#search-input").val("");
               $("#aui-header").show();
           	$("#serBar").hide();
            }

        });
    	
    })
        $("#close").on("click",function(){
        	$("#aui-header").show();
        	$("#serBar").hide();
    })
     $("#serh").on("click",function(){
        	$("#aui-header").hide();
        	$("#serBar").show();
    })
</script>
<script>
    refresher.init({
        id:"wrapper",
        pullDownAction:Refresh,
        pullUpAction:Load
    });

    function Refresh() {
        //alert(data);
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            //这里写你的刷新代码
            document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";
            setTimeout(function () {
                wrapper.refresh();
                var el, li, i;
                el =document.querySelector("#wrapper ul");
                var data = data.msg.data;
                $.each(data,function(num,data){
                    li = document.createElement('li');
                    li.innerHTML = '  <div class="aui-media-list-item-inner">\
                    <div class="aui-list-item-media" style="width: 3rem;">\
                    <img src="'+data.headUrl+'" class="aui-img-round">\
                    </div>\
                    <div class="aui-list-item-inner">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14">'+data.nickname+' </div>\
            <div class="aui-list-item-right">'+data.purchaseState+'</div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14"></div>\
                    <div class="aui-list-item-right">'+data.acceptTime+'</div>\
            </div>\
            </div>\
            </div>';
                    el.insertBefore(li, el.childNodes[0]);
                })
            },1000);//模拟qq下拉刷新显示成功效果
            /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
        }, 1000);
    }
    function Load() {
        setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            var data = data.msg.data;
            $.each(data,function(num,data){
                li = document.createElement('li');
                li.innerHTML = ' <div class="aui-media-list-item-inner">\
                    <div class="aui-list-item-media" style="width: 3rem;">\
                    <img src="'+data.headUrl+'" class="aui-img-round">\
                    </div>\
                    <div class="aui-list-item-inner">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14">'+data.nickname+' </div>\
            <div class="aui-list-item-right">'+data.purchaseState+'</div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14"></div>\
                    <div class="aui-list-item-right">'+data.acceptTime+'</div>\
            </div>\
            </div>\
            </div>';
                el.appendChild(li, el.childNodes[0]);
            })
            wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
        },1000);
    }
</script>
</body>
</html>